

<style lang="less"scoped="scoped">
	
	
	
	
	
	.booking{
		width: 3.41rem;
		height: .9rem;
		margin-top: .1rem;
		padding: 0 .17rem;
		position: relative;
		
		.seat{
			padding-left: .4rem;
			padding-top: .2rem;
			display: flex;
			justify-content: space-between;
			align-items:center;
			
			.btn{
				background: orange;
				color: white;
			    width: .94rem;
			    border-radius: .38rem;
			    height: .34rem;
			    border: none;
			    font-size: .13rem;
			}
			
		}
		.disc{
			margin-left: .4rem;
			font-size: .12rem;
		}
		.icon-zuowei{
			position: absolute;
			top: .3rem;
			left: .1rem;

			color: red;
		}
		
	}
	img{
		width: 3.75rem;
		height: 1.8rem;
	}
	.address{
		width: 3.41rem;
		height: 1rem;
		padding: 0 .17rem;
		position: relative;
		border-top: .01rem dashed;
		p{
			padding-left: .4rem;
			padding-top: .3rem;
		}
		
		.icon-weizhi{
			position: absolute;
			top: .3rem;
			left: .1rem;

			color: cornflowerblue;
		}
	}
	.telephones{
		width: 3.41rem;
		height: .84rem;
		padding: 0 .17rem;
		position: relative;
		border-top: .01rem dashed;
		border-bottom: .01rem dashed;
		
		p{
			padding-left: .4rem;
			padding-top: .3rem;
		}
		
		.icon-weibiaoti-{
			position: absolute;
			top: .3rem;
			left: .1rem;

			color: indianred;
		}
	}
	.iconfont{

		font-size: .3rem;
	}
	
</style>
<style type="text/css">
	.icon{
		padding-top: .3rem;
		background: #EBEBEB;

		
	}
	.van-tabs--line .van-tabs__wrap{
			height: .65rem;
			
		}
	.van-tab{
		position: relative;
	}
	.common{
		height: .2rem;
		position: absolute;
		top: .27rem;
		left: .27rem;
		font-size: .12rem;
		color: darkgray;
		
	}	
	.blank{
		padding-top: .3rem;
	}	
</style>



<template>
	<div class="all">
	<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_830010_r2j6h0b4oxf.css"/>
		<img src="https://static.m.maizuo.com/v4/static/app/asset/66461d1a02a9eaa64876c90952c42aed.png"/>
		<div class="booking">
			<i class="iconfont icon-zuowei"></i>
			<p class="seat">
				<span>订座票</span>
				<button class="btn">立即购票</button>
			</p>
				<p class="disc">选好场次及座位，到取票机自动取票</p>
		</div>
		<ul class="item">
			
			
			<li class="address">
				<i class="iconfont icon-weizhi"></i>
				<p>{{obj.address}}</p>
			</li>
			
			<li class="telephones">
				<i class="iconfont icon-weibiaoti-"></i>
				<p>{{String(obj.telephones)}}</p>
			</li>
		</ul>
		<div class="icon">
			<van-tabs :swipe-threshold="5">
			  <van-tab >
			  	<div slot="title" @click="clickGet('取票')">
					<i class="iconfont icon-qupiao"></i>
			  		<p class="common">取票</p>
			  	</div>
			  	
			  	
			  	
			  </van-tab>
			  <van-tab title="3D">
			  	<div slot="title"  @click="clickGet('3D')">
					<i class="iconfont icon-glasses"></i>
			  		<p class="common">3D</p>
			  		
			  	</div>
			  	
			  
			  </van-tab>
			  <van-tab title="停车">
			  	<div slot="title"  @click="clickGet('停车')">
					<i class="iconfont icon-tingche"></i>
			  		<p class="common">停车</p>
			  		
			  	</div>
			  	
			  	
			  </van-tab>
			  <van-tab title="优惠">
			  	<div slot="title" @click="clickGet('优惠')">
					<i class="iconfont icon-youhui"></i>
			  		<p class="common">优惠</p>
			  		
			  	</div>
			  	
			  	
			  </van-tab>
			  <van-tab title="交通" >
			  	<div slot="title" @click="clickGet('公交')">
					<i class="iconfont icon-jiaotong"></i>
			  		<p class="common">交通</p>
			  		
			  	</div>
			  	
			  	
			  </van-tab>
			</van-tabs>
		</div>
		<p class="blank"></p>
	</div>
	
</template>
			
<script>
	import { Tab, Tabs } from 'vant';
	import { ajax } from '@/utils'
	export default{
		data(){
			return{
				obj:{},
				active: 5,
				
			}
		},
		
		created(){
			this.getDetail();
			
		},
		
		components:{
			[Tab.name]: Tab,
			[Tabs.name]: Tabs
		},
		methods: {
			getDetail(){
				let {id} = this.$route.query;
				let url = `/v4/api/cinema/${id}`;
				let data = { id };
				
				ajax(url,data,(res)=>{
//					console.log(res);
					this.obj = res.cinema;
					this.$store.commit('updateTitle',res.cinema.name);
					this.clickGet("取票");
				})
			},
			
			clickGet(x){
				let p = document.querySelector('.blank');
				let obj= this.obj;

				for(let i in obj.services){
					if(obj.services[i].name == x){
							p.innerText = obj.services[i].description;
							if(x=='公交'&&obj.services[i*1+1]){
//								console.log(obj.services[i*1+1].description);
								p.innerHTML = `${obj.services[i].description}<br/>${obj.services[i*1+1].description}`;
							}
							return;
						}else{
							p.innerText = '暂无信息'
						}
				}
			}
		}
	}
	
	
</script>
				
				
			
			
			
			
			
				
		


